<template>
	<uiwu-popup v-model="showModel">
		<view class="uiwu-popup uiwu-ios" @tap.stop>
			<view class="uiwu-popup-header uiwu-flex-center">
				<text class="name">选择支付方式</text>
				<uiwu-icon type="closeempty" color="#FFF" size="24" @click="cancel"></uiwu-icon>
			</view>
			<view class="uiwu-popup-content">
				<view v-if="isCoupon" class="price">
					<uiwu-price-model
						:money="items.price" 
						colors="#231815" 
						money_size="56" 
						symbol_size="32" 
					/>
				</view>
				<view v-if="isCoupon" class="uiwu-coupon uiwu-flex-space">
					<view class="left uiwu-flex-align">
						<image src="/static/coup.png" mode="widthFix"></image>
						<text>充值优惠券</text>
					</view>
					<view class="in" @tap="showCoupon=true">
						<text v-if="couponList.length == 0" class="none">无可用优惠券</text>
						<view v-if="couponList.length != 0 && !couponId" class="you">
							有<text>{{couponList.length}}</text>张可用优惠券
						</view>
						<view v-if="couponId" class="you"> 充值满<text>{{getCouponText(couponId,'use_min_price')}}</text>元减<text>{{getCouponText(couponId,'coupon_price')}}</text>元 </view>
					</view>
					<uiwu-icon @click="showCoupon=true" type="arrowright" size="16" color="#999"></uiwu-icon>
				</view>
				<view class="uwiu-border"></view>
				<radio-group @change="changeGroup">
					<view class="uiwu-flex-column radio-group">
						<label class="uiwu-flex-space">
							<image src="/static/wxpay.png" mode="widthFix"></image>
							<text>微信支付</text>
							<radio color="#EF821E" value="weixin" />
						</label>
						<!-- #ifdef APP-PLUS -->
						<label class="uiwu-flex-space">
							<image src="/static/apply.png" mode="widthFix"></image>
							<text>支付宝支付</text>
							<radio color="#EF821E" value="alipay" />
						</label>
						<!-- #endif -->
						
					</view>
				</radio-group>
				<uiwu-footer>
					<view class="uiwu-footer">
						<view class="uiwu-footer-box uiwu-flex-center" @click="confirm">确认支付</view>
					</view>
				</uiwu-footer>
			</view>
			<view class="uiwu-ios" style="position: absolute;left: 0;right: 0;bottom: 0;background-color: #fff;"></view>
		</view>
		
		<uiwu-popup v-if="isCoupon" v-model="showCoupon">
			<view class="uiwu-coupons" @tap.stop>
				<view class="uiwu-coupons-header uiwu-flex-align">
					<uiwu-icon type="arrowleft" size="24" color="#fff" @click="showCoupon=false" />
					<view class="title">选择充值优惠券</view>
				</view>
				<view class="uiwu-coupons-box">
					<scroll-view scroll-x>
						<radio-group name="">
							<view class="radio-group uiwu-flex">
								<view 
									v-for="(item,index) in couponList"
									class="item"
									:class="couponId == item.id ? 'active' : ''"
									:key="index"
									@tap.stop="slelctCoupon(item)"
								>
									<view class="title">{{item.coupon_price}}金币优惠券</view>
									<view class="tips">充值满{{item.use_min_price}}可用</view>
									<radio @tap.stop="slelctCoupon(item)" value="1" :checked="couponId == item.id" color="#EF821E" />
								</view>
							</view>
						</radio-group>
					</scroll-view>
					<view v-if="false" class="noCoupon uiwu-flex-column uiwu-flex-center">
						<image src="/static/notedata.png" mode="widthFix"></image>
						<text>暂无优惠券</text>
					</view>
					<uiwu-footer>
						<view class="uiwu-footer">
							<view class="uiwu-footer-box uiwu-flex-center" @tap="useCoupons">确认使用</view>
						</view>
					</uiwu-footer>
				</view>
			</view>
		</uiwu-popup>
	</uiwu-popup>
</template>

<script setup lang="ts">
	import { useStore } from 'vuex';
	import { userInfo } from '@/api/api';
	import { ref, watch } from "vue";
	import { rechargeCoupons , rechargeRecharge } from "@/api/api";
	import { uiwu } from "../../config/config";
	const props = defineProps({
		isCoupon:{
			default:true,
			type:Boolean
		},
		items:{
			default:{},
			type:Object
		}
	})
	watch(()=> props.items,(e)=>{
		getrechargeCoupons()
	})
	
	const emits = defineEmits(['confirm','update:modelValue'])
	const showModel = ref<boolean>(true)
	const showCoupon = ref<boolean>(false)
	const couponId = ref<string | number>(0)
	const couponList = ref([])
	const pay_type = ref(null)
	const store = useStore();
	const increment = (data,type) => {
	    store.commit(type, data);
	};
	const getUserInfo = async () => {
		const {data} = await userInfo();
		increment(data,'set_user')
	}
	const cancel = () : void => {
		showModel.value = true
		couponId.value = 0
		emits('update:modelValue', false);
		getUserInfo()
	}
	const getrechargeCoupons = async () : Promise<any> => {
		const { data } = await rechargeCoupons ({
			recharge_id:props.items.id
		})
		couponList.value = data
	}
	const getCouponText = (id,type) => {
		const it = couponList.value.filter(val=>val.id == id)[0];
		return it[type]
	}
	const slelctCoupon = (item:object) : void => {
		couponId.value = item.id
	}
	const changeGroup = ({detail:{value}}) => {
		pay_type.value = value
	}
	const useCoupons = () => {
		if(!couponId.value) return uiwu.toast('请选择需要使用的优惠券')
		showCoupon.value = false
	}
	/**
	 * 充值 
	 */
	const confirm = async () : Promise<any> => {
		if(!props.isCoupon) {
			emits('confirm',pay_type.value)
			cancel()
			return
		} 
		if(!pay_type.value) return uiwu.toast('请选择支付方式')
		uiwu.loading('支付中...',true)
		const {data} = await rechargeRecharge({
			recharge_id:props.items.id,
			coupon_user_id:couponId.value,
			pay_type:pay_type.value
		})
		if(pay_type.value == 'alipay'){
			uiwu.ailpay(data.data).then((res)=>{
				uiwu.hideloading()
				uiwu.toast('充值成功')
				cancel()
			}).catch((err)=>{
				uiwu.hideloading()
				uiwu.toast('支付取消')
			})
		} else {
			uiwu.wxpay(data.data).then((res)=>{
				uiwu.hideloading()
				uiwu.toast('充值成功')
				cancel()
			})
		}
	}
</script>

<style lang="scss">
	.uiwu-popup{
		position: absolute;
		left: 0;
		right: 0;
		bottom: 0;
		&-header{
			width: 100%;
			height: 100rpx;
			background: #231815;
			padding-right: 28rpx;
			.name{
				font-size: 36rpx;
				font-weight: bold;
				color: #FFFFFF;
				text-align: center;
				flex: 1;
				padding-left: 40rpx;
			}
		}
		&-content{
			background-color: #fff;
			.price{
				text-align: center;
				padding: 72rpx 0;
			}
			.uiwu-coupon{
				padding: 40rpx;
				.left{
					image{
						width: 44rpx;
					}
					text{
						font-size: 32rpx;
						font-weight: bold;
						color: #161A1B;
						margin-left: 16rpx;
					}
				}
				.in{
					flex: 1;
					text-align: right;
					.none{
						width: 100%;
						font-size: 24rpx;
						font-weight: 500;
						color: #999999;
						display: block;
					}
					.you{
						font-size: 24rpx;
						font-weight: 500;
						color: #444444;
						text{
							color: #EF821E;
						}
					}
				}
			}
			.uwiu-border{
				width: 100%;
				height: 10rpx;
				background: #F6F6F6;
			}
			.radio-group{
				padding: 20rpx 40rpx 40rpx;
				label{
					padding: 20rpx;
				}
				image{
					width: 44rpx;
				}
				text{
					flex: 1;
					padding-left: 16rpx;
					font-size: 32rpx;
					font-weight: bold;
					color: #161A1B;
				}
				radio{
					transform: scale(0.9);
				}
			}
			
		}
	}
	.uiwu-coupons{
		position: absolute;
		left: 0;
		right: 0;
		bottom: 0;
		&-header{
			width: 100%;
			height: 100rpx;
			background: #231815;
			border-radius: 32rpx 32rpx 0px 0px;
			padding: 0 20rpx;
			.title{
				font-size: 36rpx;
				font-weight: bold;
				color: #FFFFFF;
				text-align: center;
				width: 100%;
				padding-right: 30rpx;
			}
		}
		&-box{
			background-color: #fff;
			.noCoupon{
				width: 100%;
				height: 100%;
				min-height: 450rpx;
				image{
					width: 220rpx;
				}
				text{
					font-size: 28rpx;
					font-weight: 500;
					color: #444444;
					margin-top: 10rpx;
				}
			}
			.radio-group{
				min-height: 450rpx;
				padding: 24rpx;
				.item{
					width: 340rpx;
					height: 150rpx;
					background: url('/static/youhuiq.png') no-repeat 0 0;
					background-size: 100% 100%;
					flex-shrink: 0;
					margin-right: 26rpx;
					position: relative;
					padding-left: 44rpx;
					padding-top: 18rpx;
					&.active{
						background-image: url('/static/youhuiqsele.png');
					}
					.title{
						font-size: 28rpx;
						font-weight: bold;
						color: #2C1F0B;
					}
					.tips{
						padding: 8rpx 12rpx;
						background: #FAC500;
						border-radius: 8rpx;
						border: 2rpx solid #0D0D0D;
						font-size: 22rpx;
						font-weight: bold;
						color: #2C1F0B;
						display: inline-block;
						margin-top: 10rpx;
					}
					radio{
						position: absolute;
						right: 15rpx;
						top: 6rpx;
						transform: scale(0.9);
					}
				}
			}
		}
	}
	.uiwu-footer{
		padding: 0 40rpx;
		width: 100%;
		&-box{
			width: 100%;
			height: 80rpx;
			background: #EF821E;
			border-radius: 40rpx;
			font-size: 32rpx;
			font-weight: bold;
			color: #FFFFFF;
		}
	}
</style>